<template>
  <div class="app-container documentation-container">
    <div class="top">

      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-edit" @click.native="addsite">新增流程</el-button>
      </div>
    </div>
    <el-table
      ref="dragTable"
      :data="tableData.z"
      border
      style="width: 100%;margin-top:30px;"
      row-key="num"
    >
      <el-table-column
        fixed
        prop="num"
        label="序号"
        width="50"
      />
      <el-table-column
        prop="label"
        label="流程名称"
        width="120"
      />
      <el-table-column
        prop="number"
        label="流程编号"
        width="100"
      />
      <el-table-column align="center" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.flag == 1">启用</el-tag>
          <el-tag type="danger" v-if="scope.row.flag == 2">以暂停</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图标" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.imageurl" class="image_er" alt="">
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="320">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" v-if="scope.row.flag == 1" size="small" @click="handleQiyong(scope)">暂停</el-button>
          <el-button type="success" v-if="scope.row.flag == 2" size="small" @click="handleQiyong(scope)">启用</el-button>
          <el-button type="danger" size="small" @click="danger(scope.$index, tableData.y)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加养殖流程" width="30%" :visible.sync="dialogTableVisible">
      <el-form :rules="rules" ref="ruleForm" :label-position="labelPosition" label-width="80px" :model="Template">
        <el-form-item label="流程图标">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :before-upload="BreedImage">
            <img v-if="Template.imageurl" :src="Template.imageurl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="流程名称" prop="label">
          <el-input v-model="Template.label"></el-input>
        </el-form-item>
        <el-form-item label="流程编号" prop="number">
          <el-input v-model="Template.number"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="num">
          <el-input v-model="Template.num"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" plain class="submint" icon="el-icon-edit"
                     @click.native="onSubmit('ruleForm')">添加
          </el-button>
          <el-button type="success" size="small" plain v-if="tableaddflag" class="submint" icon="el-icon-edit"
                     @click.native="addtabletext">
            添加录入标题
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加录入标题" width="40%" :visible.sync="table_fn">
      <div class="toptable">
        <div class="selechtable">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="选择类型">
              <el-select v-model="tablevalue" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="tablevaluecontent" placeholder="请输入对应标题"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" plain @click.native="addtablefn">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
        ref="dragTable"
        :data="dataes"
        border
        style="width: 100%;margin-top:30px;"
        row-key="num"
      >
        <el-table-column
          fixed
          prop="type"
          label="类型"
          width="150"
        />
        <el-table-column
          prop="name"
          label="标题名称"
          width="150"
        />
        <el-table-column align="center" label="操作" width="320">
          <template slot-scope="scope">
            <el-button type="danger" size="small" plain @click="dangertable(scope.$index,Template.options)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="jiaru_">
        <el-button  class="bu_tton" type="success" size="small" plain @click.native="AddCircuit">加入流程</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import production from 'cs/addproduction/production'

  export default {
    props: {},
    components: { production },
    data() {
      return {
        dataes: [],
        tablevalue: '',
        tablevaluecontent: '',
        options: [
          { 'label': '输入框', 'value': 'input' },
          { 'label': '图片', 'value': 'img' },
          { 'label': '时间', 'value': 'date' }
        ],
        table_fn: false,
        tableaddflag: false,
        tijiao_xiugai: true,
        sortable: null,
        tableData: {
          y: [],
          z: []
        },
        temporaryObject: {},// 临时数据
        AddTemplateflag: true,
        labelPosition: 'right',
        Template: {
          label: '',
          number: '',
          num: '',
          flag: '1',      // 1启用  2暂停
          imageurl: '',
          options: [],
          values:[]

        },
        rules: {
          name: [
            { required: true, message: '请输入流程名称', trigger: 'blur' }
          ],
          number: [
            { required: true, message: '请输入流程编号', trigger: 'blur' }
          ],
          num: [
            { required: true, message: '请输入流程序号', trigger: 'blur' }
          ]
        },
        imgflag: true,
        dialogTableVisible: false,
        formInline: {
          user: ''
        }
      }
    },
    methods: {
      addtablefn() {  //添加标题
        this.Template.options.push({ 'type': this.tablevalue, 'name': this.tablevaluecontent,'val': ''})
        this.dataes = this.Template.options
      },
      dangertable(index, rows) {  //删除标题
        rows.splice(index, 1)
        this.Template.options = rows
      },
      AddCircuit(){  //加入流程
        this.ajaxarr();
        // this.table_fn = false;
      },
      addtabletext() { //添加标题 TITLE
        this.dialogTableVisible = false;
        this.table_fn = true;
        this.dataes = this.Template.options
      },
      addsite() { //新增流程按钮
        this.imgflag = true
        this.dialogTableVisible = true
        this.tijiao_xiugai = true
        this.Template = {
          label: '',
          number: '',
          num: '',
          flag: '1',      // 1启用  2暂停
          imageurl: '',
          options: [],
          values:[]
        }
      },
      handleEdit(rows) {  //编辑
        this.dialogTableVisible = true
        this.tableaddflag = true
        this.tijiao_xiugai = false
        this.tableData.z.forEach((item) => {
          if (item.num == rows.row.num) {
            this.Template = item
          }
        })
      },
      handleQiyong(rows) {  //启用 暂停
        this.tijiao_xiugai = false
        this.tableData.z.forEach((item) => {
          if (item.num == rows.row.num) {
            switch (item.flag) {
              case '1':
                item.flag = '2'
                break
              case '2':
                item.flag = '1'
                break
            }
          }
        })
        this.ajaxarr()
      },
      danger(index, rows) {  //删除
        rows.splice(index, 1)
        this.tableData.z = rows
        this.ajaxarr()

      },
      ajaxarr() {  //提交数据
        this.$apifn.SetTemp({ 'temp': this.tableData }).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.content()
            this.dialogTableVisible = false
            this.table_fn = false;
            this.$message({
              message: '恭喜您，添加成功',
              type: 'success'
            });
          }
        }).catch((res) => {
        })
      },
      sortNumber(a, b) {
        return a - b
      },
      onSubmit(formName) {  //新增流程
        // if (this.Template.imageurl == '') {
        //   this.$message({
        //     message: '警告，流程图片还没有添加哦',
        //     type: 'warning'
        //   })
        //   return false
        // }
        if (this.tijiao_xiugai == true) {
          this.tableData.z.push(this.Template)
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ajaxarr()
          } else {
            return false
          }
        })
      },
      BreedImage(file) { //添加图片
        if(this.Template.imageurl){
          if (this.$oneselfFn.IMAGEVAL(file)) {
            let imgurl = this.Template.imageurl.substr(28);
            this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.PLANT, file ,'pathimg':imgurl}).updateimage(
              (ref) => {
                if (ref.status == 200) {
                  this.Template.imageurl = ref.data.imageURL + '/' + ref.data.imagePath
                }
              }, (res) => {
                if(res.request.status == 500){
                  this.$notify({
                    title: '警告',
                    message: '请上传标准图片格式',
                    type: 'warning'
                  })
                }
              })
          }
        }else {
          if (this.$oneselfFn.IMAGEVAL(file)) {
            this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.BREED, file }).addimg(
              (ref) => {
                if (ref.status == 200) {
                  this.Template.imageurl = ref.data.imageURL + '/' + ref.data.imagePath
                }
              }, (res) => {
                if(res.request.status == 500){
                  this.$notify({
                    title: '警告',
                    message: '请上传标准图片格式',
                    type: 'warning'
                  })
                }
              })
          }
        }
        return false
      },
      content() {

        this.$apifn.SetTemp().then((ref) => {
          if (ref.data.Response.code == 200) {
            if (ref.data.Response.data != null) {
              // localStorage.setItem('moban', JSON.stringify(ref.data.Response.data))
              this.tableData = ref.data.Response.data;
              this.tableData.z.sort(function(a, b) {
                return a.num - b.num
              })
            }
          }
        }).catch((res) => {
        })
      }
    },
    watch: {},
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
      this.content()
    }
  }
</script>
<style scoped>
  .jiaru_{
    width:100%;
    height:50px;
  }
  .jiaru_ .bu_tton{
    margin-top: 20px;
    margin-left: 80%;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .image_er {
    width: 50px;
    height: 50px;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }
  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {

    .top {
      width: 100%;
      height: 147px;

    }

    .add_zhandian {
      width: 100%;
      height: 38px;
    }

    .selech {
      width: 100%;
      height: 50px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .toptable {
      width: 100%;
      height: 60px;
    }

    .selechtable {
      width: 100%;
      height: 60px;
    }

    .top {
      width: 100%;
      height: 50px;
    }

    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }

    .selech {
      width: 25%;
      height: 100%;
      float: left;

    }
  }
</style>
